<template>
	<view class="whitePage">
		<!-- 用户基本信息 -->
		<u-cell-group :border="false">
			<u-cell title="头像" border>
				<view slot="value" class="flex">
					<u-image :src="info.avatar" width="180rpx" height="180rpx" />
					<u-upload
						:fileList="avatarFile"
						@afterRead="afterReadAfatar"
						:deletable="false"
						:maxCount="1"
						width="180rpx"
						height="180rpx"
						uploadIcon="plus"
					/>
				</view>
			</u-cell>
			<u-cell title="昵称" :value="info.nickname" isLink border @click="openModal('nickname')" />
			<u-cell title="会员ID" :value="info.userId" isLink border />
			<u-cell title="手机号" :value="info.mobile || '暂无'" isLink border />
			<u-cell title="实名认证" isLink border>
				<view slot="value" :style="{color: info.authentication ? 'aquamarine' : '#ff0d0e'}">
					实名认证：{{info.authentication ? '已认证' : '未认证'}}
				</view>
			</u-cell>
			<u-cell title="性别" :value="info.gender == 1 ? '男' : '女'" isLink border @click="sexShow = true" />
			<u-cell title="身高" :value="(info.height || '--') + 'CM'" isLink border @click="openModal('height')" />
			<u-cell title="生日" :value="info.birthday" isLink border @click="dateShow = true" />
			<u-cell title="体重" :value="(info.weight || '--') + 'KG'" isLink border @click="openModal('weight')" />
			<u-cell title="理想体重" :value="(info.idealWeight || '--') + 'KG'" isLink border />
			<u-cell title="静息心率" :value="(info.rhr  || '--') + '次/分钟'" isLink border @click="openModal('rhr')" />
			<u-cell title="语音播报" border>
				<u-switch slot="value" v-model="info.voiceBroadcast" @change="updateUser('voiceBroadcast', info.voiceBroadcast)" />
			</u-cell>
		</u-cell-group>
		<!-- 修改信息弹窗 -->
		<u-modal
			:show="modalShow"
			title="修改信息"
			@cancel="modalShow = false"
			@confirm="confirm"
			showCancelButton
			confirmColor="#FE5E10"
		>
			<view class="slot-content">
				<u-input
					placeholder="请输入内容"
					:type="formData.unit ? 'number' : 'text'"
					border="surround"
					v-model="formData.value"
				>
					<text slot="suffix" v-if="formData.unit">{{ formData.unit }}</text>
				</u-input>
				<!-- <template v-if="formData.name == 'mobile'"></template> -->
				<!-- <u-input placeholder="请输入手机号" type="number"  border="surround" v-model="formData.value" />
				<u-input type="number">
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="(e) => tips = e"
							seconds="60"
							changeText="60秒重新获取"
						/>
						<u-button
							@tap="getCode"
							:text="tips"
							type="success"
							size="mini"
						/>
					</template> -->
				</u-input>
			</view>
		</u-modal>
		<!-- 性别选择 -->
		<u-action-sheet
			round="10"
			@close="sexShow = false"
			:safeAreaInsetBottom="true"
			cancelText="取消"
			:actions="sexList"
			title="请选择您的性别"
			:show="sexShow"
			@select="(e) => updateUser('gender', e.id)"
		/>
		<!-- 生日日期选择 -->
		<u-datetime-picker
			:show="dateShow"
			v-model="info.birthday"
			mode="date"
			:minDate="0"
			:maxDate="new Date().getTime()"
			ref="datetimePicker"
			@confirm="confirme"
			@cancel="dateShow = false"
		/>
	</view>
</template>

<script>
import { baseUrl, imgUrl } from "@/utils/baseUrl.js"
import { getMyInfo, editUserInfo, sendCode } from '@/api/user.js';
export default {
	data() {
		return {
			imgUrl,
			avatarFile: [],
			info: {
				voiceBroadcast: false
			},
			modalShow: false,
			formData: {},
			tips: '',
			sexShow: false,
			sexList: [
				{name: '男', id: 1},
				{name: '女', id: 0}
			],
			dateShow: false
		}
	},
	created() {
		getMyInfo().then(res => this.info = res)
	},
	methods: {
		// 生日选择
		confirme(e) {
			const date = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
			this.updateUser('birthday', date)
		},
		// 获取验证码
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					uni.$u.toast('验证码已发送');
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		// 打开信息编辑弹窗
		openModal(name) {
			const obj = {
				nickname: {unit: '', text: '昵称'},
				height: {unit: 'CM', text: '身高'},
				weight: {unit: 'KG', text: '体重'},
				rhr: {unit: '次/分钟', text: '静息心率'},
			}
			this.formData = { name, value: this.info[name], ...obj[name] }
			this.modalShow = true
		},
		// 修改信息提交
		confirm() {
			let {name, value} = this.formData
			value = value.replace(/\s/g, "")
			if(!value || value <= 0) {
				this.$u.toast('请输入正确数据后提交！')
				this.formData.value = ''
				return
			}
			this.updateUser(name, value)
		},
		// 头像上传
		afterReadAfatar(e) {
			const _this = this
			uni.uploadFile({
				url: baseUrl+'upload/file', 
				filePath: e.file.url,
				name: 'image',
				success: (res) => {
					res = JSON.parse(res.data)
					if(res.code === 200){
						_this.updateUser('avatar', res.data)
					} else {
						_this.$u.toast('头像上传失败！')
					}
				}
			})
		},
		// 修改用户信息
		updateUser(name, value) {
			const param = {}
			param[name] = value
			editUserInfo(param).then(() => {
				this.info[name] = value
				this.modalShow = false
				this.dateShow = false
			})
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .u-upload {
	margin-left: 30rpx;
}
.whitePage {
	margin-top: 20rpx;
}
::v-deep .u-modal {
	background: url('https://cdn.hansifit.com/20220707/jb.png') 12% 0 no-repeat;
	background-size: 110% 140rpx;
}
.slot-content {
	width: 100%;
}
</style>